<template>
    <div class="container">
        <div class="tableBar">
            <label style="margin-right: 5px;">
                歌手姓名：
            </label>
            <el-input v-model="name" placeholder="请输入歌手姓名" style="width: 15%"></el-input>
            <el-button type="primary" style="margin-left: 5px;" @click="handlePageSelect()">查询</el-button>
            <el-button type="primary" style="float: right" @click="addSinger()">+添加歌手</el-button>
        </div>

        <template>
            <el-table :data="recodes" stripe style="width: 100%">
                <el-table-column prop="name" label="姓名" width="180">
                </el-table-column>
                <el-table-column prop="sex" label="性别" width="180">
                    <template slot-scope="scope">
                        {{ scope.row.sex === "1" ? '男' : '女' }}
                    </template>
                </el-table-column>

                <el-table-column label="照片">
                    <template slot-scope="scope">
                        <el-image style="width: 80px; height: 80px; border: none;" :src=scope.row.pic></el-image>
                    </template>
                </el-table-column>

                <el-table-column prop="birth" label="出生日期">
                </el-table-column>
                <el-table-column prop="location" label="地址" width="180">
                </el-table-column>
                <el-table-column prop="introduction" label="介绍" :show-overflow-tooltip="true" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.introduction }}
                    </template>
                </el-table-column>

                <el-table-column label="歌曲管理" width="180">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleManageSong(scope.row.id)">管理歌曲</el-button>
                    </template>
                </el-table-column>

                <el-table-column prop="operate" label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleUpdate(scope.row.id)">修改</el-button>
                        <el-button type="text" @click="handleDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>

            </el-table>
        </template>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
            :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total" class="pageList">
        </el-pagination>
    </div>
</template>

<script>

import { PageQuery } from '@/api/singer'
import { DeleteSinger } from '@/api/singer'


export default {
    data() {
        return {
            name: '',
            total: 0,
            page: 1,
            pageSize: 5,
            recodes: []
        }
    },
    created() {
        this.handlePageSelect()
    },
    methods: {
        //分页查询
        handlePageSelect() {
            const params = { name: this.name, page: this.page, pageSize: this.pageSize }
            PageQuery(params).then((res) => {
                if (res.data.code === 1) {
                    this.recodes = res.data.data.recodes;
                    this.total = res.data.data.total;
                }
            }).catch((error) => {
                this.$message.error('请求出错了')
            })
        },
        //更改pageSize
        handleSizeChange(pageSize) {
            this.pageSize = pageSize
            this.handlePageSelect()
        },
        //更改当前页码
        handleCurrentChange(page) {
            this.page = page
            this.handlePageSelect()
        },
        addSinger() {
            this.$router.push('/AddSinger')
        },
        handleDelete(id) {
            this.$confirm('此操作将永久删除歌手, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                DeleteSinger(id).then((res) => {
                    if (res.data.code === 1) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.handlePageSelect()
                    } else {
                        this.$message.error(res.data.msg)
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleUpdate(id) {
            this.$router.push({
                path: '/AddSinger',
                query: {
                    id: id
                }
            })
        },
        handleManageSong(id) {
            this.$router.push({
                path: '/ManagerSong',
                query: {
                    id: id
                }
            })
        }
    }
}
</script>

<style>
.container {
    z-index: 1;
    background: #fff;
    padding: 30px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

.el-tooltip__popper {
    font-size: 14px;
    max-width: 40%
}

.img {
    display: block;
    width: 100px;
    height: 100px;
}

/* .pageList{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
} */

.pageList {
    margin-left: 24%;
    margin-top: 3%;
}
</style>